<template>
  <div>
    <!-- <vue-qrcode-reader
      ref="qrCodeReader"
      @decode="onDecode"
      :delay="300"
      :camera="true"
      :facing-mode="'environment'"
      :video-constraints="{ width: 640, height: 480 }"
    ></vue-qrcode-reader> -->
    <div>扫码</div>
    <qrcode-stream
        v-show="qrcode"
        :camera="camera"
        :torch="torchActive"
        @decode="onDecode"
        @init="onInit"
      />
  </div>
</template>

<script>
// 引入
import { QrcodeStream } from "vue-qrcode-reader";
export default {
  name: "QrcodePage",
  components: {
    QrcodeStream
  },
  data() {
    return {
      result: '', // 扫码结果信息
      error: '', // 错误信息
      // show: false,
      // qrcode: false,
      qrcode: true,
      torchActive: false,
      camera: 'auto',
    };
  },
  methods: {
    onDecode(decodedText) {
      alert('Decoded text:' + decodedText);
      console.log('Decoded text:', decodedText);
      // 在这里处理扫描到的二维码内容
    },
    async onInit(promise) {
        // const { capabilities } = await promise;
        // const TORCH_IS_SUPPORTED = !!capabilities.torch;
        try {
            await promise;
        } catch (error) {
            if (error.name === 'NotAllowedError') {
                this.error = 'ERROR: 您需要授予相机访问权限';
            } else if (error.name === 'NotFoundError') {
                this.error = 'ERROR: 这个设备上没有摄像头';
            } else if (error.name === 'NotSupportedError') {
                this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
            } else if (error.name === 'NotReadableError') {
                this.error = 'ERROR: 相机被占用';
            } else if (error.name === 'OverconstrainedError') {
                this.error = 'ERROR: 安装摄像头不合适';
            } else if (error.name === 'StreamApiNotSupportedError') {
                this.error = 'ERROR: 此浏览器不支持流API';
            }
        }
    },
  },
};
</script>